<template>
	<view class="box">
		<view class="top_wrapper hidden flex1">
			<view class="top bg_f5 flex3 w_flex1 text-ellipsis">
				<navigator :url="url" open-type="redirectTo" hover-class="none" class="top_left flex3">
					<view class="font_27 text_bold">{{city_data.city}}</view>
					<image src="../../static/image/index/n@2x.png"></image>
				</navigator>
				<view class="w_flex1 flex1 text-ellipsis" v-if="is_map" @click="get_map_wrapper">
					<view class="w_flex1 text-ellipsis">
						<view style="height: 100%;" class="flex3 text-ellipsis" v-if="hot_data">
							<view class="font_31 van-ellipsis">{{hot_data.region_name}}</view>
						</view>
						<swiper class="swiper hidden" :interval="2500" autoplay circular vertical v-else>
							<swiper-item>
								<view class="font_31 color_7b van-ellipsis">搜索地点查找附近寄存点</view>
							</swiper-item>
							<swiper-item>
								<view class="font_31 color_7b van-ellipsis">点击地图上的橙色图标即可预订</view>
							</swiper-item>
							<swiper-item>
								<view class="font_31 color_7b van-ellipsis">双指可缩放地图，查看更多寄存点</view>
							</swiper-item>
						</swiper>
					</view>
					<image src="../../static/image/index/b.png" class="top_icon"></image>
				</view>
				<view class="w_flex1 text-ellipsis" v-else>
					<van-field placeholder="输入位置、地标、景点" placeholder-style="color: #acacac" :value="hot_data.region_name"
						class="font_31 text-ellipsis" auto-focus clearable @input="get_search2" @clear="get_clear"
						@confirm="getConfirm" />
				</view>
			</view>
			<view class="bg_fff font_27 flex7 quxiao" v-if="!is_map" @click="is_map = true;">取消</view>
		</view>
		<!-- 地图 -->
		<view class="map_wrapper" v-if="is_map">
			<view class="main">
				<map subkey="NYTBZ-MMLE6-TO7SN-MD5XU-CS4EE-JIBEU" layer-style="2" id="maps" show-location
					:longitude="hot_data?hot_data.lng: city_data.longitude"
					:latitude="hot_data?hot_data.lat:city_data.latitude" :markers="markers_list" :scale="scale"
					:class="!show?'active': ''" @markertap="get_mark" @regionchange="get_reg"></map>
			</view>
			<view class="map_icon" @click="get_scale">
				<image src="../../static/image/index/p@2x.png"></image>
			</view>
			<view class="map_centre">
				<!-- <image src="../../static/image/index/j1@2x.png" mode="widthFix"></image> -->
			</view>
		</view>
		<!-- 热门地点 -->
		<view v-else>
			<v-search ref="search" @get_change="get_change"></v-search>
		</view>
		<!-- 店铺显示 -->
		<view class="modal_wrapper bg_f5" v-if="show">
			<view class="modal_top_title"></view>
			<view class="modal_center hidden">
				<navigator :url="'./detail?id=' + item.id" hover-class="none" class="modal_list hidden"
					v-for="item in store_list" :key="item.id">
					<view class="modal_top flex1">
						<view class="modal_image">
							<image :src="item.image_text[0]" class="bg_image active"></image>
							<image src="../../static/image/index/r@2x.png" class="bg_icon"></image>
						</view>
						<view class="modal_content">
							<view class="font_35 text_bold">{{item.store_name}}</view>
							<view class="font_23 modal_m1" v-if="item.status == 1">营业时间：{{item.business_hours}}</view>
							<view class="font_23 modal_m1" v-else>停业中</view>
							<view class="flex3">
								<view class="font_23 color_7b w_flex1" v-if="item.address && item.address.length > 6">
									{{(item.address).substr(0, 6)}}****(预定后提供寄存点的<text
										class="color_ff6a00">详细地址、联系电话、导航</text>)
								</view>
								<view class="font_23 color_7b w_flex1" v-else>
									{{item.address}}****(预定后提供寄存点的<text class="color_ff6a00">详细地址、联系电话、导航</text>)
								</view>
								<view class="font_31 text_bold modal_btn color_fff">预定</view>
							</view>
							<view class="flex1" style="margin-top: 8rpx;">
								<image src="../../static/image/index/w@2x.png" mode="heightFix"
									style="height: 25rpx;width: 20rpx;margin: 4rpx 16rpx 0 0;" />
								<view class="font_23 flex1 color_7b">距{{(item.store_name)}}约{{item.distance}}千米</view>
							</view>
						</view>
					</view>
					<view class="modal_bottom flex1">
						<view class="modal_bottom_block font_23 color_fff" v-for="itemText in item.label_text"
							:key="itemText">{{itemText}}</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '../../components/search/index.vue';
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');

	export default {
		components: {
			'v-search': search
		},
		data() {
			return {
				url: '',
				mapIocn: null,
				from_name: '',
				back_index: false,
				store_id: null,
				store_list: [],
				city_data: null,
				hot_data: null,
				markers_list: [],
				is_map: true, // 地图是否显示
				show: false, // 店铺是否展示
				// scale: 10, // 地图缩放级别
				scale: 12, // 地图缩放级别
				lastTapDiffTime: 0, // 双击
				lastTapTimeoutFunc: null, // 双击
				store_array: [],
			}
		},
		onLoad(e) {
			this.city_data = uni.getStorageSync('cityData');
			this.hot_data = uni.getStorageSync('hotArea');

			this.url = './city_search?from=true';

			setTimeout(() => {
				this.from_name = e.type;
				this.mapIocn = uni.createMapContext('maps');
			}, 300)

			// if (e.type === 'city') {
			// 	// 城市
			// 	this.url = './city_search?from=true';
			// }

			if (e.type === 'area') {
				// 热门地区
				this.is_map = false;

				setTimeout(() => {
					this.$refs.search.get_search('');
				}, 100)
			}

			if (e.show) {
				this.back_index = true;
			}

			this.getStoreListByRegionName();
		},
		onShow() {
			this.city_data = uni.getStorageSync('cityData');
			this.hot_data = uni.getStorageSync('hotArea');

			if (this.hot_data) {
				this.scale = 12;
			} else {
				// this.scale = 10;
				this.scale = 12;
			}
		},
		onUnload(e) {
			if (this.back_index) {
				uni.reLaunch({
					url: './index'
				})

				return true;
			}
		},
		methods: {
			getStoreListByRegionName() {
				let self = this;
				this.markers_list = [];

				this.$http.post(this.$api.getStoreListByRegionName, {
					region_name: this.city_data.city,
					lng: this.city_data.longitude,
					lat: this.city_data.latitude
				}, true).then(res => {
					if (res.code == 200) {
						let list_ = res.data || [];
						this.store_list = list_;
						this.store_array = list_;

						if (list_.length > 0) {
							list_.forEach((n, k) => {
								this.markers_list.push({
									id: n.id,
									width: 32,
									height: 38,
									latitude: n.lat,
									longitude: n.lng,
									iconPath: '../../static/image/index/ｏ@2x.png'
								})
							})

							this.get_mark(this.markers_list[0], true);
						}
					}

					if (res.code == 2001) {
						let self = this;
						setTimeout(() => {
							uni.redirectTo({
								url: self.url
							})
						}, 2000)
					}

					// if (this.city_data) {
					// 	this.markers_list = [{
					// 		width: 30,
					// 		height: 30,
					// 		latitude: this.city_data.latitude,
					// 		longitude: this.city_data.longitude,
					// 		iconPath: '../../static/image/index/i1.png'
					// 	}]
					// }					
				})
			},
			getStoreByHotRegionId() {
				let self = this;
				this.markers_list = [];

				if (!this.hot_data) {
					this.getStoreListByRegionName();
					return
				}

				this.$http.get(this.$api.getStoreByHotRegionId, {
					region_id: this.hot_data.region_id
				}).then(res => {
					let list_ = res.data;
					this.store_list = list_;

					// if (this.city_data) {
					// 	this.markers_list = [{
					// 		width: 30,
					// 		height: 30,
					// 		latitude: this.city_data.latitude,
					// 		longitude: this.city_data.longitude,
					// 		iconPath: '../../static/image/index/i1.png'
					// 	}]
					// }

					list_.forEach((n, k) => {
						this.markers_list.push({
							id: n.id,
							width: 32,
							height: 38,
							latitude: n.lat,
							longitude: n.lng,
							iconPath: '../../static/image/index/ｏ@2x.png'
						})
					})
				})
			},
			// 标记点
			get_mark(e, type) {
				if (!this.is_map) return

				let markerId = null;
				if (type) {
					markerId = e.id
				} else {
					markerId = e.detail.markerId;
				}
				this.store_id = markerId;

				this.markers_list.forEach((n, k) => {
					if (n.id === markerId) {
						n.width = 40
						n.height = 50
						n.iconPath = '../../static/image/index/q@2x.png'
						if (!type) {
							this.store_list = [this.store_array[k]];
						}
					} else {
						if (n.id) {
							n.width = 32
							n.height = 38
							n.iconPath = '../../static/image/index/ｏ@2x.png'
						}
					}
				})

				this.show = true;
			},
			// 双击放大地图
			get_scale() {
				let _this = this;

				_this.mapIocn.moveToLocation(); // 回到定位的地方
				return

				let curTime = new Date().getTime();
				let lastTime = _this.lastTapDiffTime;
				_this.lastTapDiffTime = curTime;
				// 两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {
					// 双击
					_this.scale++;
					clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				} else {
					// 单击事件延时300毫秒执行
					_this.lastTapTimeoutFunc = setTimeout(function() {
						// 单击
						_this.mapIocn.moveToLocation();
					}, 300);
				}
			},
			// 滑动地图
			get_reg() {
				return
				this.show = false;

				this.markers_list.forEach((n, k) => {
					if (n.id) {
						n.width = 32
						n.height = 38
						n.iconPath = '../../static/image/index/ｏ@2x.png'
					}
				})
			},
			// 清除
			get_clear() {
				this.$refs.search.get_search('');
			},
			get_search2(e) {
				this.$refs.search.get_search(e.detail);
			},
			get_change() {
				this.hot_data = uni.getStorageSync('hotArea');
				this.is_map = true;
				this.scale = 12;
				// 店铺
				if (this.hot_data.search) {
					this.get_mark({
						detail: {
							markerId: this.hot_data.region_id
						}
					})
					this.$forceUpdate();
				}
			},
			get_map_wrapper() {
				this.is_map = false;
				this.show = false;

				this.markers_list.forEach((n, k) => {
					n.width = 32
					n.height = 38
					n.iconPath = '../../static/image/index/ｏ@2x.png'
				})

				setTimeout(() => {
					this.$refs.search.get_check(this.hot_data.region_name);
				}, 10)
			},
			// 百度经纬度转换腾讯经纬度
			reverseLocation(lat, log) {
				let tx_log = '';
				let tx_lat = '';
				var that = this;
				console.log(lat);
				console.log(log);
				// 实例化API核心类
				var demo = new QQMapWX({
					key: 'NYTBZ-MMLE6-TO7SN-MD5XU-CS4EE-JIBEU'
				});
				// 调用接口
				demo.reverseGeocoder({
					location: {
						latitude: lat,
						longitude: log
					},
					coord_type: 1, //baidu经纬度
					success: function(res) {
						console.log(res)
						tx_lat = res.result.ad_info.location.lat;
						tx_log = res.result.ad_info.location.lng;
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						console.log(res);
					}
				});

				return {
					tx_lat: tx_lat,
					tx_log: tx_log
				}
			},
			// 点击完成
			getConfirm() {
				return
				let list = this.$refs.search.getBackList();

				if (list.length > 0) {
					this.store_list = list;
					this.show = true;
					this.is_map = true;
				} else {
					getApp().get_msg('未搜索到结果')
				}
			}
		}
	}
</script>

<style lang="less">
	.top_wrapper {
		padding: 0 20rpx;
	}

	.swiper {
		height: 54rpx;

		view {
			line-height: 54rpx;
		}
	}

	.top {
		width: 704rpx;
		height: 62rpx;
		margin: 12rpx auto 23rpx;
		border-radius: 12rpx;

		input {
			flex: 1;
		}
	}

	.top_left {
		height: 100%;
		margin-right: 23rpx;
		padding: 0 23rpx;
		border-right: 1px solid #fff;

		image {
			width: 17rpx;
			height: 17rpx;
			margin-left: 4rpx;
			margin-top: 18rpx;
		}
	}

	.top_icon {
		width: 34rpx;
		height: 34rpx;
		padding: 10rpx;
		margin: 0 23rpx;
	}

	.main {
		height: calc(100vh - 96rpx);

		map {
			width: 100%;
			height: 80%;

			&.active {
				height: 100%;
			}
		}

		&.active {
			background-color: #fff;
		}
	}

	.map_icon {
		right: 17rpx;
		bottom: 200rpx;
		position: fixed;

		image {
			width: 127rpx;
			height: 127rpx;
		}
	}

	.modal_wrapper {
		bottom: 0;
		left: 0;
		right: 0;
		position: fixed;
		border-radius: 29rpx 29rpx 0 0;

		.modal_top_title {
			height: 33rpx;
			z-index: 99;
		}

		.modal_center {
			overflow-y: auto;
			max-height: 730rpx;
		}
	}

	.modal_list {
		width: 719rpx;
		padding: 0 31rpx;
		margin: 33rpx auto;
		border-radius: 23rpx;
		background-color: #fff;
		box-sizing: border-box;

		&:first-child {
			margin-top: 0;
		}

		.modal_top {
			margin-top: 23rpx;
			margin-bottom: 12rpx;
			padding-bottom: 12rpx;
			border-bottom: 1px dashed #D2D2D2;
		}

		.modal_image {
			width: 152rpx;
			height: 152rpx;
			overflow: hidden;
			position: relative;
			margin-right: 29rpx;
			border-radius: 23rpx;

			.bg_image {
				width: 100%;
				height: 100%;

				&.active {
					filter: blur(4px);
				}
			}

			.bg_icon {
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 33rpx;
				position: absolute;
			}
		}

		.modal_content {
			flex: 1;

			.modal_btn {
				margin-left: 38rpx;
				padding: 8rpx 12rpx;
				border-radius: 12rpx;
				background: linear-gradient(273deg, #EE8332 0%, #FF6A00 100%);
			}
		}

		.modal_m1 {
			margin: 8rpx 0;
		}

		.modal_bottom {
			.modal_bottom_block {
				padding: 4rpx 12rpx;
				border-radius: 12rpx;
				margin-right: 23rpx;
				margin-bottom: 23rpx;

				&:first-child {
					background-color: #FE9A01;
				}

				&:nth-child(2) {
					background-color: #FDC400;
				}

				&:nth-child(3) {
					background-color: #4B7CE5;
				}
			}
		}
	}

	.map_wrapper {
		position: relative;

		.map_centre {
			top: 50%;
			left: 50%;
			position: absolute;
			-webkit-transform: translateX(-50%) translateY(-50%);

			image {
				width: 40rpx;
				height: 66rpx;
			}
		}
	}

	.top /deep/ .van-cell {
		padding: 0 20rpx 0 0;
		background-color: transparent;
	}

	.quxiao {
		padding: 20rpx;
		height: 62rpx;
		margin-top: 12rpx;
		box-sizing: border-box;
	}

	.text-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	/deep/ .van-field__input {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
</style>
